<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span>{{ $route.meta.title}}</span>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="index">
          <div class="panel-heading">
            <img src="http://placeimg.com/200/200/scenery" />
            <span class="title">
              <p class="role">{{ name }}</p>
              <span class="name">{{desc}}</span>
            </span>

            <el-button
              class="el-icon-edit-outline"
              style="font-size: 28px; position: absolute; right: 31px; cursor: pointer;"
              @click="edit(uId)"
            ></el-button>
          </div>

          <div class="panel-body">
            <ul>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="fa fa-id-card"></i>
                  </el-col>
                  <el-col :span="12">编号</el-col>
                  <el-col :span="6">{{uId}}</el-col>
                </el-row>
              </li>
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="el-icon-circle-check"></i>
                  </el-col>
                  <el-col :span="12">名称</el-col>
                  <el-col :span="6">{{name}}</el-col>
                </el-row>
              </li>
              <!-- <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="el-icon-warning"></i>
                  </el-col>
                  <el-col :span="12">密码</el-col>
                  <el-col :span="6">{{password}}</el-col>
                </el-row>
              </li>-->
              <li>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <i class="el-icon-more"></i>
                  </el-col>
                  <el-col :span="12">权限</el-col>
                  <el-col :span="6">{{desc}}</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原密码" prop="pass" >
              <el-col :span="12">
                <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password" autocomplete="off"></el-input>
                <!-- <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password" ></el-input> -->
              </el-col>
            </el-form-item>
            <el-form-item label="新密码" prop="newpass" >
              <el-col :span="12">
                <el-input
                  v-model="ruleForm.newpass"
                  placeholder="请输入新密码"
                  type="password"
                  autocomplete="off"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="重复新密码" prop="checknewpass" >
              <el-col :span="12">
                <el-input
                  v-model="ruleForm.checknewpass"
                  placeholder="请再次输入新密码"
                  type="password"
                  autocomplete="off"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editPass('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserInfo } from "../../utils/dataStorage";
import { editPass as editPass } from "../../api/user";
import { resolve } from "q";
//import editName from '@/views/personal/editName.vue';
import editName from "./editName.vue";

export default {
  data() {
    //改填
    //校验原密码
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value !== this.password) {
        callback(new Error("与原密码不一致!请重新输入"));
      } else if (this.ruleForm.checknewpass !== "") {
          this.$refs.ruleForm.validateField("newpass");
        } else {
        callback();
      }
    };
    /*****检验新密码是否为空***/
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码！"));
      } else if(value === this.ruleForm.pass){
        callback(new Error("新密码与原密码相同！请重新输入"));
      } else {
        if (this.ruleForm.checknewpass !== "") {
          this.$refs.ruleForm.validateField("checknewpass");
        }
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newpass) {
        callback(new Error("两次输入密码不一致! 请重新输入"));
      } else {
        callback();
      }
    };

    return {
      activeName: "index",
      ruleForm: {
        pass: "",
        newpass: "",
        checknewpass: ""
      }, //修改密码的表单
      uId: "",
      name: "",
      password: "",
      uType: "",
      desc: "",

      rules: {
          pass: [
            {required: true, validator: validatePass1, trigger: 'blur' }
          ],
          newpass: [
            {required: true, validator: validatePass2, trigger: 'blur' }
          ],
          checknewpass: [
            {required: true, validator: validatePass3, trigger: 'blur' }
          ],
          
        // pass: [{ required: true, message: "请输入原始密码", trigger: "blur" }],
        // newpass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        // checknewpass: [ { required: true, message: "请再次输入密码", trigger: "blur" }]
      }
    };
  },

  //开始加载做什么事
  created() {
    this.getUser();
  },

  //改填
  // computed: {
  //   ...mapGetters(["username"])
  // },

  //定义函数
  methods: {
    resetForm(formName){
        this.$refs[formName].resetFields();
    },
    getUser(formName) {
      this.name = getUserInfo().username;
      this.uId = getUserInfo().uId;
      this.password = getUserInfo().password;
      this.uType = getUserInfo().uType;
      if (this.uType == 1) {
        this.desc = "超级管理员";
      } else if (this.uType == 2) {
        this.desc = "客服";
      } else if (this.uType == 3) {
        this.desc = "任务调度";
      } else if (this.uType == 4) {
        this.desc = "技术工程师";
      } else if (this.uType == 5) {
        this.desc = "库管";
      } else if (this.uType == 6) {
        this.desc = "运营监督";
      }
    },
    //提交修改密码表单
    editPass(ruleForm) {

      
          
     
     
      let param = new URLSearchParams();
      param.append("username", this.name);
      param.append("pass", this.ruleForm.pass);
      param.append("newpass", this.ruleForm.newpass);
      //param.append("checknewpass",this.ruleForm.checknewpass);
      
      //执行修改密码方法
      editPass(param).then(r => {
        console.log(r)

        if (r.code == 1) {
          this.$message({
            message: "保存成功！请重新登录！",
            type: "success"
          });
          console.log(r);

        //修改成功后消除token，回到登录
        sessionStorage.removeItem(this.$Config.tokenKey);
        this.$router.push({path: '/login'});
     

       



       }else {
            alert('error submit!');
            return false;
          }
        });


    },
    edit(uId) {
      let that = this;
      this.$layer.iframe({
        content: {
          content: editName, //传递的组件对象
          parent: this, //当前的vue对象
          data: { uId } //props
        },
        area: ["800px", "600px"],
        title: "修改名称",  
        shadeClose: false,
        shade: true,
        cancel() {
          // that.$layer.close(index);
          console.log("关闭");
          that.getUser();
          console.log("哈哈");
          // this.$router.push({ path: "/personal" });
        }
      });
    }
  },
  //加载之后做什么事
  mounted: function() {}
};
</script>
<style lang="scss">
.box-card {
  border-radius: 0;
  .panel-heading {
    display: flex;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid #eeeff1;
    padding: 15px;
    font-weight: bold;
    img {
      margin-right: 15px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .name {
        color: #367fa9;
        font-size: 18px;
      }
      .role {
        color: #99a9c0;
      }
    }
  }
  .panel-body {
    color: #3c8dbc;
    ul {
      li {
        border-bottom: 1px solid #eeeff1;
        padding: 0 15px;
        height: 45px;
        line-height: 45px;
      }
    }
  }
}
</style>
